<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝宝成长记录APP原型</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-100 p-8">
    <h1 class="text-3xl font-bold text-center mb-8">宝宝成长记录APP原型图</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
        <!-- 首页 -->
        <div class="prototype-container">
            <h2 class="text-xl font-semibold mb-2">首页</h2>
            <div class="phone-frame">
                <div class="status-bar"></div>
                <iframe src="home.html" frameborder="0"></iframe>
            </div>
        </div>
        
        <!-- 日期记录页 -->
        <div class="prototype-container">
            <h2 class="text-xl font-semibold mb-2">日期记录</h2>
            <div class="phone-frame">
                <div class="status-bar"></div>
                <iframe src="date-tracker.html" frameborder="0"></iframe>
            </div>
        </div>
        
        <!-- 日期记录-添加新纪念日 -->
        <div class="prototype-container">
            <h2 class="text-xl font-semibold mb-2">添加纪念日</h2>
            <div class="phone-frame">
                <div class="status-bar"></div>
                <iframe src="add-date.html" frameborder="0"></iframe>
            </div>
        </div>
        
        <!-- 宝宝生长记录-主页 -->
        <div class="prototype-container">
            <h2 class="text-xl font-semibold mb-2">生长记录首页</h2>
            <div class="phone-frame">
                <div class="status-bar"></div>
                <iframe src="growth-tracker.html" frameborder="0"></iframe>
            </div>
        </div>
        
        <!-- 身高记录页 -->
        <div class="prototype-container">
            <h2 class="text-xl font-semibold mb-2">身高记录</h2>
            <div class="phone-frame">
                <div class="status-bar"></div>
                <iframe src="height-tracker.html" frameborder="0"></iframe>
            </div>
        </div>
        
        <!-- 体重记录页 -->
        <div class="prototype-container">
            <h2 class="text-xl font-semibold mb-2">体重记录</h2>
            <div class="phone-frame">
                <div class="status-bar"></div>
                <iframe src="weight-tracker.html" frameborder="0"></iframe>
            </div>
        </div>
        
        <!-- 添加生长记录 -->
        <div class="prototype-container">
            <h2 class="text-xl font-semibold mb-2">添加生长记录</h2>
            <div class="phone-frame">
                <div class="status-bar"></div>
                <iframe src="add-growth-record.html" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</body>
</html> 